import { observer } from 'mobx-react'
// import './managementOperationsDetails.less'
import { useEffect, useState } from 'react'
import { useNavigate, useParams } from 'react-router-dom'
import { getManagementOperationsDetails } from '@/apis/logManagement/managementOperations'
import { Button, Card, Form, Input, message, Space, Tag } from 'antd'

const StaffManagement: React.FC = () => {
  // 获取路由中的动态参数 :id
  const { id } = useParams<{ id: string }>() // 使用 TypeScript 时，指定参数类型
  const [messageApi, contextHolder] = message.useMessage()
  const navigate = useNavigate()
  const [data, setData] = useState<any>({})
  const [loading, setLoading] = useState(false)

  const getData = async () => {
    messageApi.open({
      type: 'loading',
      content: '加载中',
      duration: 0
    })
    try {
      const response = await getManagementOperationsDetails({ id })
      if (response.code === 200) {
        // 为每条数据添加唯一的 key
        setData(response.data)
      } else {
        message.error(response.message || '获取数据失败')
      }
    } catch (error) {
      message.error('获取数据失败')
    } finally {
      messageApi.destroy()
    }
  }

  useEffect(() => {
    // 假设你使用 `id` 去请求数据
    // 这里可以通过 id 获取数据
    // fetchData(id);
    getData()
  }, [id])

  const handleSubmit = async () => {
    try {
      setLoading(true)
      console.log('提交的值:', data)
      // TODO: 调用添加接口
      message.success('添加成功')
      navigate('/setting/logManagement/managementOperations')
    } catch (error) {
      message.error('添加失败')
    } finally {
      setLoading(false)
    }
  }
  return (
    <div className="add-app-detail">
      <div className="basic-info">
        <div className="title">
          <span>日志信息</span>
          <Tag color={['error', 'success'][data.status]} bordered={false}>
            {['失败', '成功'][data.status]}
          </Tag>
        </div>
          <Form style={{ flex: 1 }} labelCol={{ span: 4 }}>
            <Form.Item label="操作时间">
              <Input value={data.operationTime} readOnly={true} />
            </Form.Item>
            <Form.Item label="操作人">
              <Input value={data.operator} readOnly={true} />
            </Form.Item>

            <Form.Item label="操作模块">
              <Input value={data.module} readOnly={true} />
            </Form.Item>

            <Form.Item label="操作内容">
              <Input value={data.content} readOnly={true} />
            </Form.Item>

            <Form.Item label="操作IP">
              <Input value={data.ip} readOnly={true} />
            </Form.Item>
          </Form>
      </div>
      <div className="basic-info">
        <div className="title">
          <span>日志详情</span>
        </div>
        <div className="form-group">
          <Form style={{ flex: 1 }} labelCol={{ span: 4 }}>
            <Form.Item label="请求地址">
              <Input value={data.httpRequestUrl} readOnly={true} />
            </Form.Item>
            <Form.Item label="请求方式">
              <Input value={data.httpMethod} readOnly={true} />
            </Form.Item>
            <Form.Item label="浏览器">
              <Input.TextArea value={data.browserInfo} readOnly={true} rows={5} />
            </Form.Item>
          </Form>
          <Form style={{ flex: 1 }} labelCol={{ span: 4 }}>
            <Form.Item label="请求参数">
              <Input.TextArea
                value={data.requestParams}
                readOnly={true}
                styles={{
                  textarea: {
                    height: '232px'
                  }
                }}
              />
            </Form.Item>
          </Form>
        </div>
      </div>
      <div className="form-actions">
        <Button type="primary" htmlType="submit" loading={loading} onClick={handleSubmit}>
          保存
        </Button>
        <Button onClick={() => navigate(-1)}>返回</Button>
      </div>
    </div>
  )
}

export default observer(StaffManagement)
